<template>
	<view class="container">
		<view class="warp-title">
			<view class="title-item" v-for="(titleItem, titleIndex) in titleData" :key="titleIndex">
				<p class="item-name">{{ titleItem.name }}</p>
				<p class="item-value">
					{{ titleItem.value }}
					<span v-if="titleIndex == 2 || titleIndex == 3">%</span>
				</p>
			</view>
		</view>
		<!-- <uni-datetime-picker v-model="datetimerange" type="daterange" :border="false" /> -->
		<view class="box box-5">
			<view class="title">
				各单位培训不合格人员分布
			</view>
			<view class="change">
				<view class="select search-item">
					<text>多选单位</text>
					<view class="select-border multiple" @click="">
						<zxz-uni-data-select v-model="deptCodes" multiple collapse-tags :localdata="deptCodesLocaldata"
							:border="false" @change="changeDeptCodes()">
						</zxz-uni-data-select>
					</view>
				</view>
			</view>
			<view class="charts-box main">
				<template>
					<view v-if="chartData5.series[0].data.length == 0 ">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="pie" :opts="optsPie" :chartData="chartData5" v-else />
				</template>
			</view>
		</view>
		<view class="box box-6 no-search">
			<view class="title">
				各月考试平均及格率
			</view>
			<view class="charts-box main">
				<template>
					<view v-if="chartData6.categories.length == 0 ">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="line" :opts="optsLine" :chartData="chartData6" v-else />
				</template>
			</view>
		</view>
		<view class="box" v-for="(item, index) in optionList" :key="index" :class="'box-'+item.index">
			<!-- {{item.index}} -->
			<view class="title">
				{{item.title}}
			</view>
			<view class="change">
				<view class="date-picker search-item" v-if="item.index == 2 || item.index == 3">
					<text>选择时间</text>
					<view class="select-border" @click="showDatePicker(index)">
						<text v-if="!item.time">请选择时间</text>
						<text v-if="item.time" class="selectedTxt">{{ item.time }}</text>
					</view>
				</view>
				<view class="select search-item" v-if="item.index !== 4">
					<text>选择考试</text>
					<view class="select-border" @click="showPicker(index)">
						<text v-if="!item.testId">选择考试</text>
						<text v-if="item.testId" class="selectedTxt">
							{{ testIdObj[item.testId] }}
						</text>
					</view>

				</view>
				<view class="select search-item" v-if="item.index == 4">
					<text>多选考试</text>
					<view class="select-border multiple" @click="">
						<zxz-uni-data-select v-model="testIds" multiple collapse-tags :localdata="testIdLocaldata"
							:border="false" @change="changeTestIds()">
						</zxz-uni-data-select>
					</view>
				</view>
			</view>
			<view class="charts-box main">
				<!-- <qiun-data-charts :type="item.type" :opts="optsList[index]" :chartData="chartDataList[index]" /> -->
				<template v-if="item.index == 1">
					<view v-if="chartDataSmall.series[0].data.length == 0 ">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="pie" :opts="optsPie" :chartData="chartDataSmall" v-else />
				</template>
				<template v-if="item.index == 1">
					<view v-if="chartDataBig.series[0].data.length == 0 ">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="pie" :opts="optsPie" :chartData="chartDataBig" v-else />
				</template>

				<template v-if="item.index == 2">
					<view v-if="chartData2.categories.length == 0 ">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="column" :opts="optsBar" :chartData="chartData2" v-else />
				</template>
				<template v-if="item.index == 3">
					<view v-if="chartData3.categories.length == 0 ">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="column" :opts="optsBarStack" :chartData="chartData3" v-else />
				</template>
				<template v-if="item.index == 4">
					<view v-if="chartData4.categories.length == 0 ">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="column" :opts="optsBarStack" :chartData="chartData4" v-else />
				</template>
			</view>
		</view>
		<!-- 排行榜 ranking list-->
		<view class="box ranking" v-for="(item, index) in rankingList" :key="'t'+index" :class="'box-'+item.index">
			<view class="title">
				{{item.title}}
			</view>
			<view class="change">
				<view class="date-picker search-item">
					<text>选择时间</text>
					<view class="select-border range" v-if="item.index !== 8">
						<uni-datetime-picker v-model="item.range" type="daterange" :border="false" ref="rangePicker"
							@change="getTableData(index)" />
					</view>
				</view>
			</view>
			<view class="main">
				<view v-if="item.tableData.length == 0">
					<u-empty mode="data" icon="../../static/dataEmpty.png">
					</u-empty>
				</view>
				<view class="search_results table" :class="'table-'+item.index" v-else>
					<view class="result_item th">
						<text class="td index">排名</text>
						<text class="td">姓名</text>
						<text class="td">单位</text>
						<text class="td" v-if="item.index == 7">次数</text>
						<text class="td" v-if="item.index == 8">不及格次数</text>
						<text class="td" v-if="item.index == 9">平均分</text>
						<text class="td long" v-if="item.index == 9">参加考试次数</text>
					</view>
					<view class="result_item tb" v-for="(tr,ti) in item.tableData" :key="ti">
						<text class="td index">{{ti+1}}</text>
						<text class="td">{{tr.username}}</text>
						<text class="td">{{tr.deptName}}</text>
						<text class="td" v-if="item.index == 7">{{tr.total}}</text>
						<text class="td" v-if="item.index == 8">{{tr.num}}</text>
						<text class="td" v-if="item.index == 9">{{tr.avg}}</text>
						<text class="td long" v-if="item.index == 9">{{tr.total}}</text>
					</view>
				</view>
				<view v-else>
					<u-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></u-empty>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="timeShow" v-model="timeValue" mode="date" @cancel="timeShow = false"
			@confirm="changeTime" ref="timeValue">
		</u-datetime-picker>
		<!-- 暂时没有设置默认值 -->
		<u-picker :show="testIdShow" :columns="testIdOptions" keyName="name" @cancel="testIdShow = false"
			@confirm="changeTestId" ref="testIdValue"></u-picker>

	</view>
</template>

<script>
	import {
		examPie,
		deptScoreBar,
		deptPassBar,
		examPassBar,
		deptFailPie,
		examPassLine,
		examNumTable,
		examFailTable,
		examScoreTable,
		examTitle,
		defaultTest,
		getTestIdOptions,
		selectDeptName,
	} from "../../utils/api.js"
	// import UniDatetimePicker from '../../uni_modules/uni-datetime-picker/components/uni-datetime-picker.vue'
	const myTooltip = {
		showArrow: false,
		borderWidth: 1,
		borderRadius: 3,
		borderColor: "#EEF1F7",
		borderOpacity: 0.9,
		bgColor: "#FFFFFF",
		bgOpacity: 1,
		boxPadding: 5,
		fontSize: 14,
		lineHeight: 28,
		fontColor: "#666666",
	}
	export default {
		data() {
			return {
				chartDataBig: {
					series: [{
						data: [],
					}]
				},
				chartDataSmall: {
					series: [{
						data: [],
					}]
				},
				chartData2: {
					categories: [],
					series: []
				},
				chartData3: {
					categories: [],
					series: [{
							name: "及格",
							data: [],
						},
						{
							name: "不及格",
							data: [],
						}
					]
				},
				chartData4: {
					categories: [],
					series: []
				},
				chartData5: {
					series: [{
						data: [],
					}]
				},
				chartData6: {
					categories: [],
					series: []
				},
				optsPie: {
					padding: [10, 10, 10, 10],
					enableScroll: false,
					update: true,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						},
						tooltip: myTooltip,
					}
				},
				optsBar: {
					padding: [15, 10, 10, 15],
					enableScroll: false,
					dataLabel: false,
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						rotateAngle: 45,
						marginTop: 6,
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							labelPosition: "center"
						},
						tooltip: myTooltip,
					}
				},
				optsBarStack: {
					padding: [15, 10, 10, 30],
					enableScroll: false,
					dataLabel: false,
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						rotateAngle: 45,
						marginTop: 6,
					},
					extra: {
						column: {
							type: "stack",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							labelPosition: "center"
						},
						tooltip: myTooltip,
					}
				},
				optsLine: {
					padding: [15, 10, 10, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						rotateAngle: 45,
						marginTop: 6,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						tooltip: myTooltip,
					}
				},
				titleData: [{
						name: "累计考试总次数",
						key: "amount",
						value: "",
					},
					{
						name: "参加考试总人数",
						key: "people",
						value: "",
					},
					{
						name: "平均参加考试人数比率",
						key: "reference",
						value: "",
					},
					{
						name: "平均考试及格率",
						key: "pass",
						value: "",
					},
				],
				optionList: [{
						index: 1,
						testId: null,
						time: Number(new Date()),
						title: "考试及格率分布及考试参加人数比率"
					},
					{
						index: 2,
						testId: null,
						time: Number(new Date()),
						title: "各单位考试成绩统计",
					},
					{
						index: 3,
						testId: null,
						time: Number(new Date()),
						title: "各单位考试成绩及格率统计",
					},
					{
						index: 4,
						testId: null,
						time: Number(new Date()),
						title: "各考试及格率统计",
					},
				],
				// 时间选择器
				timeShow: false,
				timeValue: Number(new Date()),
				curTimeIndex: null,
				// 考试id选择器，单选
				testIdShow: false,
				testIdValue: "",
				curTestIndex: null,
				testIdOptions: [], //考试单选的数组
				testIdObj: {}, //显示id对应的名字
				// 考试id，多选
				testIdLocaldata: [], //选项
				testIds: [1, 2, 3], //值
				// 工区，多选
				deptCodesLocaldata: [],
				deptCodes: [],
				// 排行榜
				rankingList: [{
						index: "7",
						title: "员工参加考试次数排行榜",
						range: [],
						tableData: [],
					},
					{
						index: "8",
						title: "员工考试不及格次数排行榜",
						range: [],
						tableData: [],
					}, {
						index: "9",
						title: "员工考试平均成绩排行榜",
						range: [],
						tableData: [],
					},
				],
			};
		},
		computed: {
			// containHeight() {
			// 	return this.fullHeight ? {
			// 		height: 'calc(100vh - 44px - 50px)'
			// 	} : {
			// 		height: '100%'
			// 	}
			// },
		},
		// 页面加载了，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成.
		onLoad(option) {
			this.setDefaultTime();
			this.getOptions();
			this.getTitle();
			this.getGraph2();
			this.getGraph3();
			this.getGraph4();
			this.getGraph5();
			this.getGraph6();
		},
		// 监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用.
		// onReady() {

		// },
		methods: {
			// 设置默认时间
			setDefaultTime() {
				this.optionList.forEach((e) => {
					e.time = this.formatTime(e.time);
				});
				this.$nextTick(() => {
					const deft = this.defaultRange();
					this.rankingList.forEach((e) => {
						e.range = deft;
					});
					this.getTableData(0);
					this.getTableData(1);
					this.getTableData(2);
				});
			},
			// 默认时间范围
			defaultRange() {
				// 最近一个月
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				const time = [this.formatTime(start), this.formatTime(end)];
				return time;
			},
			// 时间格式重构
			formatTime(shijianchuo) {
				function add0(m) {
					return m < 10 ? "0" + m : m;
				}
				var time = new Date(shijianchuo);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				return y + "-" + add0(m) + "-" + add0(d);
			},
			// 获取下拉获取试卷id
			getOptions() {
				getTestIdOptions().then(s => {
					if (s.code === 20000) {
						this.testIdOptions = [s.data];
						// 用于展示考试id对应的名称
						this.testIdOptions[0].forEach((item, index) => {
							this.testIdObj[item.id] = item.name;
						});
						// 处理得到多选的数组
						this.testIdLocaldata = s.data.map(x => { // 循环数据
							const model = { // 把后端返回过来的数据里面的键给替换成我想要的键
								text: x.name,
								value: x.id,
							};
							return model;
						});
						this.getDefaultTest();
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
				selectDeptName().then(s => {
					if (s.code === 20000) {
						// console.log(s.data);
						this.deptCodesLocaldata = s.data.map(x => { // 循环数据
							const model = { // 把后端返回过来的数据里面的键给替换成我想要的键
								text: x,
								value: x,
							};
							return model;
						});
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			// 获取默认的考试
			getDefaultTest() {
				defaultTest().then(s => {
					if (s.code === 20000) {
						const data = s.data;
						this.optionList.forEach((e) => {
							e.testId = data.testId;
						});
						this.getGraph1();
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getGraph1() {
				let params = {
					testId: this.optionList[0].testId,
				};
				examPie(params).then(s => {
					if (s.code === 20000) {
						let data = s.data;
						if (data.big) {
							data.big.noexamNum = data.big.num - data.big.examNum;
						}
						// console.log(data);
						let seriesDataSmall = [{
								"name": "及格",
								"value": data.small.pass,
								"color": "#91cc75",
							},
							{
								"name": "不及格",
								"value": data.small.nopass,
								"color": "#ee6666",
							}
						];
						let seriesDataBig = [{
							"name": " 参加考试",
							"value": data.big.examNum,
							"color": "#5470c6",
						}, {
							"name": "未参加考试",
							"value": data.big.noexamNum,
							"color": "#fac858",
						}];
						let resSmall = {
							series: [{
								data: seriesDataSmall,
							}]
						};
						let resBig = {
							series: [{
								data: seriesDataBig,
							}]
						};
						this.chartDataSmall = JSON.parse(JSON.stringify(resSmall));
						this.chartDataBig = JSON.parse(JSON.stringify(resBig));
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getGraph2() {
				let params = {
					startTime: this.optionList[1].time,
					id: this.optionList[1].testId,
					size: 8,
				};
				// console.log("getGraph2", params);
				deptScoreBar(params).then(s => {
					if (s.code === 20000) {
						const data = s.data;
						// console.log(data);
						const xData = this.getAttrs(data, "deptName");
						let yData = {
							max: [],
							avg: [],
							min: [],
						};
						for (let key in yData) {
							yData[key] = this.getAttrs(data, key);
						};
						let res = {
							categories: xData,
							series: [{
									name: "最高分",
									data: yData.max,
								},
								{
									name: "平均分",
									data: yData.avg,
								},
								{
									name: "最低分",
									data: yData.min,
								},
							]
						};
						//console.log(res);
						this.chartData2 = JSON.parse(JSON.stringify(res));
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getGraph3() {
				let params = {
					time: this.optionList[2].time,
					id: this.optionList[2].testId,
					size: 6,
				};
				// console.log("getGraph3", params);
				deptPassBar(params).then(s => {
					if (s.code === 20000) {
						const data = s.data;
						// console.log("3", data);
						let xData = []
						if (!data.every((e) => e.pass == undefined)) {
							xData = this.getAttrs(data, "deptName");
						}

						let yData = {
							pass: [],
							nopass: [],
						};
						for (let key in yData) {
							yData[key] = this.getAttrs(data, key);
						};

						let res = {
							categories: xData,
							series: [{
									name: "及格",
									data: yData.pass,
									"color": "#91cc75",
								},
								{
									name: "不及格",
									data: yData.nopass,
									"color": "#ee6666",
								}
							]
						};
						//console.log(res);
						res.series.forEach(series => {
						  series.data = series.data.map(item => Number(item));
						});
						this.chartData3 = JSON.parse(JSON.stringify(res));
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getGraph4() {
				let params = {
					size: 8,
					ids: this.testIds.toString(),
				};
				// console.log("getGraph4", params);
				examPassBar(params).then(s => {
					if (s.code === 20000) {
						const data = s.data;
						// console.log("4", data);
						const xData = this.getAttrs(data, "bankName");
						let yData = {
							pass: [],
							nopass: [],
						};
						// parseFloat(e)
						for (let key in yData) {
							let strArr = this.getAttrs(data, key);
							let numArr = strArr.map(e => parseFloat(e));
							yData[key] = numArr;
						}
						let res = {
							categories: xData,
							series: [{
									name: "及格",
									data: yData.pass,
									"color": "#91cc75",
								},
								{
									name: "不及格",
									data: yData.nopass,
									"color": "#ee6666",
								}
							]
						};
						//console.log(res);
						this.chartData4 = JSON.parse(JSON.stringify(res));
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getGraph5() {
				let params = {
					size: 8,
				};
				if (this.deptCodes.length > 0) {
					params.deptName = this.deptCodes.toString();
				}
				deptFailPie(params).then(s => {
					if (s.code === 20000) {
						let data = s.data;
						let seriesData = [];
						data.name.forEach((name) => {
							let value = 0;
							const curArr = data.pie.find((arr) => arr.deptName == name);
							if (curArr) value = curArr.num;
							seriesData.push({
								name: name,
								value: value,
							});
						});
						// console.log(seriesData);
						let res = {
							series: [{
								data: seriesData,
								format: 'piePeople',
							}]
						};
						this.chartData5 = JSON.parse(JSON.stringify(res));
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getGraph6() {
				examPassLine().then(s => {
					if (s.code === 20000) {
						const data = s.data;
						// console.log(data);
						const xData = this.getAttrs(data, "date");
						const yData = this.getAttrs(data, "percentage");
						// 语句加上{}-得有return, 没有{}-可以没有return
						let seriesData = yData.map(e => parseFloat(e));
						let res = {
							categories: xData,
							series: [{
								name: "及格率",
								data: seriesData
							}]
						};
						//console.log(res);
						this.chartData6 = JSON.parse(JSON.stringify(res));
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getTableData(i) {
				let time = this.rankingList[i].range;
				let params = {};
				// 第二个没有时间参数
				if (i !== 1) {
					params = {
						starTime: time[0],
						endTime: time[1],
					};
				}
				if (i == 0) {
					examNumTable(params).then(s => {
						this.setTableData(i, s);
					})
				} else if (i == 1) {
					examFailTable(params).then(s => {
						this.setTableData(i, s);
					})
				} else if (i == 2) {
					examScoreTable(params).then(s => {
						this.setTableData(i, s);
					})
				}
			},
			setTableData(i, s) {
				if (s.code == 20000) {
					this.rankingList[i].tableData = s.data;
					// console.log(i, s.data);
				} else {
					uni.showToast({
						title: s.message,
						icon: 'none'
					})
				}
			},
			getTitle() {
				examTitle().then(s => {
					if (s.code == 20000) {
						let data = s.data;
						this.titleData.forEach((e) => {
							e.value = data[e.key];
						});
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getAttrs(array, attr) {
				var arr = array.map((item) => {
					return item[attr];
				});
				return arr;
			},
			// 显示时间选择器
			showDatePicker(index) {
				// 设置选择器显示的时间
				const time = this.optionList[index].time;
				this.timeValue = new Date(time).getTime();
				// 重新赋值
				this.$refs.timeValue.innerValue = this.timeValue;
				this.curTimeIndex = index;
				this.timeShow = true;
			},
			// 改变时间
			changeTime(e) {
				this.timeShow = false;
				const cur = this.curTimeIndex;
				// 更新值
				const timeFormat = uni.$u.timeFormat
				const time = timeFormat(e.value, 'yyyy-mm-dd');
				this.optionList[cur].time = time;
				// 更新图
				const index = this.optionList[cur].index;
				if (index == 2) this.getGraph2();
				if (index == 3) this.getGraph3();
				// console.log("changeTime" , index);
			},
			// 显示考试的选择器
			showPicker(index) {
				const id = this.optionList[index].testId;
				// console.log(id);
				this.testIdValue = this.testIdObj[id];
				// // 重新赋值
				this.$refs.testIdValue.innerValue = this.testIdValue;
				this.curTestIndex = index;
				this.testIdShow = true;
			},
			// 改变考试id
			changeTestId(e) {
				// 隐藏选择器
				this.testIdShow = false;
				// 当前的选择框index
				const cur = this.curTestIndex;
				// 根据选中的值,改变数组中对应的值
				const testId = e.value[0].id;
				this.optionList[cur].testId = testId;
				// 根据index,更新对应的图表数据
				const index = this.optionList[cur].index;
				if (index == 1) this.getGraph1();
				if (index == 2) this.getGraph2();
				if (index == 3) this.getGraph3();
				// console.log("changeTestId" , index);
			},
			changeTestIds() {
				// console.log("test");
				if (this.testIds.length <= 8) {
					this.getGraph4();
				} else {
					uni.showToast({
						title: "选项最多选择8个",
						icon: 'none'
					})
				}
			},
			changeDeptCodes() {
				if (this.deptCodes.length <= 8) {
					this.getGraph5();
				} else {
					uni.showToast({
						title: "选项最多选择8个",
						icon: 'none'
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		position: relative;
		background: #f1f1f1;
		//高度有问题 1.设置高度，底部显示不全 2.不设置高度，子元素盒子百分比计算不出
		height: calc(100vh - 44px - 50px);
		// height: 100vh;
		padding-top: 2rpx;
		padding-bottom: 50px;

		.warp-title {
			width: 96%;
			height: 25%;
			border: 1px solid #e5e5e5;
			border-radius: 20px;
			background-color: #fff;
			// background: #f1f1f1;
			margin: 20rpx auto;

			display: flex;
			flex-wrap: wrap;
			text-align: center;

			.title-item {
				width: 50%;
				height: 50%;

				.item-name {
					margin: 5% 0 12%;
					font-size: 20px;
					font-weight: 700;
					white-space: nowrap;

				}

				.item-value {
					font-size: 18px;
				}
			}
		}

		.box {
			// position: relative;
			width: 100%;
			height: 70%;
			padding: 10px 0;
			box-sizing: border-box;
			border-bottom: 1px dashed #999;
			background: #f1f1f1;

			.title {
				font-size: 20px;
				color: #1f2f3d;
				margin-left: 20px;
				line-height: 40px;
				font-weight: 700;
				white-space: nowrap;
				position: relative;
			}

			.title:before {
				content: "";
				display: block;
				top: 1px;
				border-radius: 10px;
				background-color: #0ea8e4;
				width: 5px;
				height: 20px;
				position: absolute;
				top: 10px;
				left: -12px;
			}

			.change {
				// position: absolute;
				// top: 8%;
				// left: 50%;
				// z-index: 10;
				// transform: translate(-50%, 0);
				// display: flex;
				// height: 10%;
				width: 100%;
				text-align: center;

				.button-group {
					width: 100%;
				}

				.date-picker {
					// width: 100%;
					// display: block;
					// text-align: center;
				}

				.select {
					// display: block;
					// margin-left: 14px;
					// text-align: center;
					margin: 10rpx 0;
				}

				.search-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					position: relative;
					// margin-top: 10rpx;
					font-size: 30rpx;
					box-sizing: border-box;
					padding: 10rpx 20rpx;

					.select-border {
						width: 80%;
						height: 28px;
						line-height: 28px;
						border: 1px solid #dadbde;
						border-radius: 50rpx;
						color: #B1B1B1;
						box-sizing: border-box;
						padding: 0rpx 25rpx;
						font-size: 16px;
						background-color: #FEFEFE;
						// z-index: 0;

						.selectedTxt {
							color: rgb(48, 49, 51);
						}
					}

					.range,
					.multiple {
						height: auto;
						// height: 38px;
					}

					.multiple {
						/deep/.uni-select {
							border: none;

							.uni-select__input-placeholder {
								font-size: 14px;
							}
						}
					}

					.select-border-has {
						width: 80%;
						height: 38px;
						line-height: 38px;
						border: 1px solid #dadbde;
						border-radius: 50rpx;
						// color: #B1B1B1;
						box-sizing: border-box;
						padding: 0rpx 25rpx;
						font-size: 16px;
						// z-index: 9;
						position: relative;
						display: flex;
						align-items: center;

						.selectedTxt {
							color: rgb(48, 49, 51);
						}
					}
				}
			}

			.main {
				width: 100%;
				height: 80%;
			}
		}

		.no-search {
			height: 40%;

			.main {
				height: 92%;
			}
		}

		// 两个饼图
		.box-1 {
			height: 70%;

			.main {
				height: 44%;
			}
		}

		// 排行榜
		.ranking {
			height: auto;
			// overflow-y: auto;

			.search_results {
				border-bottom: 1px solid #F3F3F3;
				background: #fff;
				// margin-top: 30rpx;
				padding: 20rpx 20rpx;
				width: 96%;
				margin: 0 auto;
				position: relative;
				box-sizing: border-box;
				border-radius: 20rpx;

				.result_item {
					// border-radius: 20rpx;
					// box-shadow: 4px 4px 10px #888888;
					border-bottom: 1px solid #D4D1D1;
					padding: 20rpx;
					width: 100%;
					position: relative;
					box-sizing: border-box;
				}

				.result_item:last-child {
					border-bottom: none;
				}
			}

			.table {

				.th,
				.tb {
					display: flex;

					.td {
						width: 30%;
						text-align: center;
					}

					.index {
						width: 10%;
					}
				}
			}

			.table-9 {

				.th,
				.tb {
					.td {
						width: 20%;
					}

					.long {
						width: 30%;
					}
				}
			}
		}

		.box-9 {
			// min-height: 40%;
			// margin-bottom: 94px;
			padding-bottom: 60px;
		}
	}
</style>